<template>
	<view>
		<swiper style="height: calc(100vh - 150rpx);" :current="swipercurrent" @change="changeswiper">
			<!-- 单选多选 -->
			<swiper-item v-for="(item,index) in timu_list" :key="item.id">
				<scroll-view scroll-y="true" class="mainpadding2"
					style="height: calc(100vh - 150rpx);position: relative;" @scroll="scrollchange">
					<view class="" style="padding-bottom: 100rpx;" :id="'swiper'+item.id">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">{{index+1}}/{{timu_list.length}}</view>
							<u-line-progress :percentage="percentage(index)" :showText="false" height="8"
								activeColor="#3478f5" inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<!-- 0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题  -->
						<view class="flexbetween margin_top" v-if="item.type_text">
							<view class="titype xiaolan">{{item.type_text}}</view>
						</view>
						<view class="titletext bold hei_text margin_top">
							<text>{{item.name}}</text>
							<text class="hui_text" style="font-weight: 400;">（{{item.score}}分）</text>
						</view>
						<template v-if="item.image_text">
							<image :src="item.image_text" class="margin_top" style="width: 100%;height: 250rpx;"
								mode=""></image>
						</template>
						<template v-if="item.audio_text">
							<view class="tingliclass flexbetween margin_top">
								<view class="flexleft margin_right" v-if="!item.is_play" @click="playAudio(index,item)">
									<u-icon name="play-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexleft margin_right" v-if="item.is_play" @click="playAudio(index,item)">
									<u-icon name="pause-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexbetween" style="width: 100%;">
									<view class="xiaohui">{{item.ybf_time | timeToMinute}}</view>
									<view style="width: 400rpx;">
										<slider activeColor="rgb(52, 120, 245)" backgroundColor="rgba(212, 212, 212, 1)"
											:block-size="12" :max="item.audio_duration" :value="item.ybf_time"
											@change="sliderToPlay($event,index,item)" />
									</view>
									<view class="xiaohui">{{item.audio_duration | timeToMinute}}</view>
								</view>
							</view>
						</template>
						<!-- 题目类型开始 -->
						<!-- 情景选择题 -->
						<template v-if="item.type==0">
							<view v-for="(ite,inde) in item.children" :key="ite.id">
								<view class="titletext bold hei_text margin_top">
									<text>{{ite.name}}</text>
									<text class="hui_text" style="font-weight: 400;">（{{ite.score}}分）</text>
									<text class="titype xiaolan">{{ite.type_text}}</text>
								</view>
								<template v-if="ite.type==1">
									<view class="flexleft tilable margin_top"
										:class="ite.dxtvalue==ite.answer_content && it.key==ite.answer_content?'lancontent':ite.dxtvalue==it.key?'hongcontent':''"
										v-for="it in ite.content_json" :key="it.key">
										<view
											:class="ite.dxtvalue==ite.answer_content && it.key==ite.answer_content?'duiimg':ite.dxtvalue==it.key?'deleteimg':''">
										</view>
										<view class="titletext bold"
											:class="ite.dxtvalue==ite.answer_content && it.key==ite.answer_content?'lan_text':ite.dxtvalue==it.key?'hong_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view
											:class="ite.dxtvalue==ite.answer_content && it.key==ite.answer_content?'xiaolan':ite.dxtvalue==it.key?'xiaohong':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">{{it.value}}</view>
									</view>
								</template>
								<template v-if="ite.type==2">
									<view class="flexleft tilable margin_top"
										:class="it.daan==2?'hongcontent':it.daan==1?'lancontent':''"
										v-for="it in ite.content_json" :key="it.key">
										<view :class="it.daan==2?'deleteimg':it.daan==1?'duiimg':''"></view>
										<view class="titletext bold"
											:class="it.daan==2?'hong_text':it.daan==1?'lan_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view :class="it.daan==2?'xiaohong':it.daan==1?'xiaolan':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">
											{{it.value}}
										</view>
									</view>
								</template>
								<template v-if="ite.type==3">
									<view class="flexleft tilable margin_top"
										:class="ite.pdtvalue==ite.answer_content && it.key==ite.answer_content?'lancontent':ite.pdtvalue==it.key?'hongcontent':''"
										v-for="it in ite.content_json" :key="it.key">
										<view
											:class="ite.pdtvalue==ite.answer_content && it.key==ite.answer_content?'duiimg':ite.pdtvalue==it.key?'deleteimg':''">
										</view>
										<view class="titletext bold"
											:class="ite.pdtvalue==ite.answer_content && it.key==ite.answer_content?'lan_text':ite.pdtvalue==it.key?'hong_text':'hei_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<view
											:class="ite.pdtvalue==ite.answer_content && it.key==ite.answer_content?'xiaolan':ite.pdtvalue==it.key?'xiaohong':'xiaohui'"
											style="min-width: 80%;max-width: 80%;">{{it.value}}</view>
									</view>
								</template>
								<template v-if="ite.type==4">
									<view class="flexbetween">
										<canvas :canvas-id="'drawCanvas'+ite.id"
											:style="{height:item.swiperHeight+'rpx'}"
											style="width: 750rpx;position: absolute;top: 0;left: 0;z-index: -1;">
										</canvas>
										<view class="left">
											<view class="tilable margin_top xiaohui" :id="'left'+index+inde+xb"
												v-for="(it,xb) in ite.left" :key="xb">{{it.name}}</view>
										</view>
										<view class="right">
											<view class="tilable margin_top xiaohui" :id="'right'+index+inde+xb"
												v-for="(it,xb) in ite.right" :key="xb">{{it.name}}</view>
										</view>
									</view>
								</template>
								<template v-if="ite.type==5">
									<view class="flexleft tilable margin_top" v-for="it in ite.zqda" :key="it.key"
										:class="it.daan==0?'hongcontent':'lancontent'">
										<view class="deleteimg" v-if="it.daan==0"></view>
										<view class="duiimg" v-if="it.daan==1"></view>
										<view class="titletext bold" :class="it.daan==0?'hong_text':'lan_text'"
											style="min-width: 10%;">{{it.key}}</view>
										<input type="text" :class="it.daan==0?'xiaohong':'xiaolan'" disabled
											v-model="it.tktvalue" style="min-width: 80%;max-width: 80%;">
									</view>
								</template>
								<!-- 简单题 -->
								<template v-if="ite.type==6">
									<view class="jianda radius mainpadding_top">
										<textarea class="textareaclass xiaohui" placeholder="请输入答案"
											v-model="ite.jdtvalue" disabled></textarea>
									</view>
								</template>
								<!-- 单选，多选，判断展示答案 -->
								<view class="flexbetween margin_top" v-if="ite.type==1 || ite.type==2 || ite.type==3">
									<view class="hei_text bold titletext">正确答案：{{ite.answer_content}}</view>
									<view class="hei_text bold titletext">你的答案：{{ite.answer.answer_content || ""}}
									</view>
								</view>
								<!-- 连线题答案 -->
								<view class="margin_top" v-if="ite.type==4">
									<view class="hei_text bold titletext">正确答案：</view>
									<view class="margin_top" v-for="(it,xb) in ite.answer_content_json" :key="xb">
										{{ite.left[it.left].name}}---{{ite.right[it.right].name}}</view>
									<view class="hei_text bold margin_top titletext">你的答案：</view>
									<view class="margin_top" v-for="(it,xb) in ite.answer.answer_content_json"
										:key="ite">{{ite.left[it.left].name}}---{{ite.right[it.right].name}}</view>
								</view>
								<view class="margin_top" v-if="ite.type==5">
									<view class="hei_text bold titletext">正确答案：</view>
									<view class="margin_top" v-for="(it,xb) in ite.answer_content_json" :key="xb">
										{{it.key}}：{{it.value}}</view>
								</view>
								<!-- 简答题答案 -->
								<view v-if="ite.type==6">
									<view class="hei_text bold margin_top titletext">正确答案：{{ite.answer_content}}</view>
								</view>
								<!-- <view class="margin_top main_size bold lan_text" v-if="ite.type && ite.analysis_content">解析：</view>
								<view class="xiaohui margin_top" v-if="ite.type && ite.analysis_content">
									<u-parse :content="ite.analysis_content"></u-parse>
								</view> -->
							</view>
						</template>
						<!-- 单选题 -->
						<template v-if="item.type==1">
							<view class="flexleft tilable margin_top"
								:class="item.dxtvalue==item.answer_content || ite.key==item.answer_content?'lancontent':item.dxtvalue==ite.key?'hongcontent':''"
								v-for="ite in item.content_json" :key="ite.key">
								<view
									:class="item.dxtvalue==item.answer_content || ite.key==item.answer_content?'duiimg':item.dxtvalue==ite.key?'deleteimg':''">
								</view>
								<view class="titletext bold"
									:class="item.dxtvalue==item.answer_content || ite.key==item.answer_content?'lan_text':item.dxtvalue==ite.key?'hong_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view
									:class="item.dxtvalue==item.answer_content || ite.key==item.answer_content?'xiaolan':item.dxtvalue==ite.key?'xiaohong':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
						</template>
						<!-- 多选题 -->
						<template v-if="item.type==2">
							<view class="flexleft tilable margin_top"
								:class="ite.daan==2?'hongcontent':ite.daan==1?'lancontent':''"
								v-for="ite in item.content_json" :key="ite.key">
								<view :class="ite.daan==2?'deleteimg':ite.daan==1?'duiimg':''"></view>
								<view class="titletext bold"
									:class="ite.daan==2?'hong_text':ite.daan==1?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view :class="ite.daan==2?'xiaohong':ite.daan==1?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">
									{{ite.value}}
								</view>
							</view>
						</template>
						<!-- 判断题 -->
						<template v-if="item.type==3">
							<view class="flexleft tilable margin_top"
								:class="item.pdtvalue==item.answer_content || ite.key==item.answer_content?'lancontent':item.pdtvalue==ite.key?'hongcontent':''"
								v-for="ite in item.content_json" :key="ite.key">
								<view
									:class="item.pdtvalue==item.answer_content || ite.key==item.answer_content?'duiimg':item.pdtvalue==ite.key?'deleteimg':''">
								</view>
								<view class="titletext bold"
									:class="item.pdtvalue==item.answer_content || ite.key==item.answer_content?'lan_text':item.pdtvalue==ite.key?'hong_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view
									:class="item.pdtvalue==item.answer_content || ite.key==item.answer_content?'xiaolan':item.pdtvalue==ite.key?'xiaohong':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
						</template>
						<!-- 连线题 -->
						<template v-if="item.type==4">
							<view class="flexbetween">
								<canvas :canvas-id="'drawCanvas'+item.id" :style="{height:item.swiperHeight+'rpx'}"
									style="width: 750rpx;position: absolute;top: 0;left: 0;z-index: -1;">
								</canvas>
								<view class="left">
									<view class="tilable margin_top xiaohui" :id="'left'+index+ind"
										v-for="(ite,ind) in item.left" :key="ind">
										{{ite.name}}
									</view>
								</view>
								<view class="right">
									<view class="tilable margin_top xiaohui" :id="'right'+index+ind"
										v-for="(ite,ind) in item.right" :key="ind">
										{{ite.name}}
									</view>
								</view>
							</view>
						</template>
						<!-- 填空题 -->
						<template v-if="item.type==5">
							<view class="flexleft tilable margin_top" v-for="ite in item.zqda" :key="ite.key"
								:class="ite.daan==0?'hongcontent':'lancontent'">
								<view class="deleteimg" v-if="ite.daan==0"></view>
								<view class="duiimg" v-if="ite.daan==1"></view>
								<view class="titletext bold" :class="ite.daan==0?'hong_text':'lan_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<input type="text" :class="ite.daan==0?'xiaohong':'xiaolan'" disabled
									v-model="ite.tktvalue" style="min-width: 80%;max-width: 80%;">
							</view>
							<!-- <view class="flexleft tilable margin_top" v-for="ite in item.zqda" :key="ite.key">
								<view class="titletext bold hei_text" style="min-width: 10%;">{{ite.key}}</view>
								<input type="text" class="xiaohei" placeholder="请输入答案" disabled v-model="ite.tktvalue"
									style="min-width: 80%;max-width: 80%;">
							</view> -->
						</template>
						<!-- 简单题 -->
						<template v-if="item.type==6">
							<view class="jianda radius mainpadding_top">
								<textarea class="textareaclass xiaohui" placeholder="请输入答案" v-model="item.jdtvalue"
									disabled=""></textarea>
							</view>
						</template>
						<!-- 单选，多选，判断展示答案 -->
						<view class="flexbetween margin_top" v-if="item.type==1 || item.type==2 || item.type==3">
							<view class="hei_text bold titletext">正确答案：{{item.answer_content}}</view>
							<view class="hei_text bold titletext">你的答案：{{item.answer.answer_content || ""}}</view>
						</view>
						<!-- 连线题答案 -->
						<view class="margin_top" v-if="item.type==4">
							<view class="hei_text bold titletext">正确答案：</view>
							<view class="margin_top" v-for="(ite,ind) in item.answer_content_json" :key="ind">
								{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</view>
							<view class="hei_text bold margin_top titletext">你的答案：</view>
							<view class="margin_top" v-for="(ite,ind) in item.answer.answer_content_json" :key="ind">
								{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</view>
						</view>
						<view class="margin_top" v-if="item.type==5">
							<view class="hei_text bold titletext">正确答案：</view>
							<view class="margin_top" v-for="(ite,ind) in item.answer_content_json" :key="ind">
								{{ite.key}}：{{ite.value}}</view>
						</view>
						<!-- 简答题答案 -->
						<view v-if="item.type==6">
							<view class="hei_text bold margin_top titletext">正确答案：{{item.answer_content}}</view>
						</view>
						<view class="margin_top main_size bold lan_text" v-if="item.type && item.analysis_content">解析：
						</view>
						<!-- <video src="https://cdn.uviewui.com/uview/resources/video.mp4" class="margin_top"
							style="width: 300rpx;height: 200rpx;"></video> -->
						<view class="xiaohui margin_top" v-if="item.type && item.analysis_content">
							<u-parse :content="item.analysis_content"></u-parse>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="posibottom mainpadding flexbetween ffffff">
			<view class="flexcolumn">
				<u-icon name="file-text" color="#333" size="24" id="idceshi"></u-icon>
				<view class="xiaohei" @click="dtlshow=true">答题卡</view>
			</view>
			<view class="resetbtn" style="border-radius: 15rpx;background-color: #e6edf9;width: 40%;" @click="upswiper">
				上一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 40%;" @click="downswiper">下一题</view>
		</view>
		<u-popup :show="dtlshow" @close="dtlshow=false" :round="10">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext  hei_text bold">答题卡</view>
				</view>
				<view class="flexleft flex_wrap margin_top6">
					<view class="itemkabox flexcenter margin_top2" v-for="(item,index) in timu_list" :key="index"
						@click="dtkswiper(index)">
						<view class="itemkas xiaobai">{{index+1}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				dtlshow: false,
				tijiaoshow: false,
				is_choose_teacher: "0",
				teacher_name: "",
				teacher_id: "",


				education_lesson_id: 3, //课程ID
				student_examination_id: 229, //测试记录ID
				timu_list: [],
				duration: 0, //倒计时时长
				swipercurrent: 0, //轮播当前滑块
				swiperupcurrent: 0, //轮播上一次的滑块
				platform: "",
				bgAudioManager: null,
				audio_currentIndex: 0, //当前播放的音频下标
				flag: true,
				scrolltop: 0, //滑动距离顶部的位置
				equipmentwidth: 0,
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data));
			let getWindowInfo = uni.getWindowInfo()
			this.equipmentwidth = getWindowInfo.screenWidth
			console.log(this.equipmentwidth, "惊雷");
			this.education_lesson_id = data.education_lesson_id
			this.student_examination_id = data.student_examination_id
			this.bgAudioManager = wx.getBackgroundAudioManager()
			this.platform = uni.getSystemInfoSync().platform;
			this.init()
		},
		onHide() {
			if (this.bgAudioManager) {
				this.bgAudioManager.stop()
			}
		},
		watch: {
			timu_list() {
				let _this = this;
				if (_this.flag == true) {
					_this.flag = false
					_this.$nextTick(() => {
						_this.timu_list.forEach((item, index) => {
							if (item.type == 4) {
								if (item.answer) {
									let answer_content = JSON.parse(item.answer.answer_content)
									answer_content.forEach((ans, ansind) => {
										let idname1 = "#" + "left" + index + ans.left
										let idname2 = "#" + "right" + index + ans.right
										let data = {
											leftid: ans.left + 'left',
											leftitem: item.left[ans.left],
											leftmsg: {
												x: 0,
												y: 0
											},
											rightid: ans.right + 'right',
											rightitem: item.right[ans.right],
											rightmsg: {
												x: 0,
												y: 0
											}
										}
										// const query = uni.createSelectorQuery().in(this);
										uni.createSelectorQuery().select(idname2)
											.boundingClientRect(res2 => {
												data.rightmsg.x = res2.right - (index * _this
														.equipmentwidth) -
													res2.width
												data.rightmsg.y = res2.top + (res2.height / 2)
											}).exec();
										uni.createSelectorQuery().select(idname1)
											.boundingClientRect(res1 => {
												data.leftmsg.x = res1.left - (index * _this
													.equipmentwidth)
												data.leftmsg.y = res1.top + (res1.height / 2)
											}).exec();
										item.lxarr.push(data)
									})
									// console.log(item.lxarr,"数据信息维护");
									this.lxFnshow(index)
								}
							}
							if (item.type == 0) {
								item.children.forEach((ite, ind) => {
									if (ite.answer && ite.type == 4) {
										let answer_content = JSON.parse(ite.answer.answer_content)
										answer_content.forEach((ans, ansind) => {
											let idname1 = "#" + "left" + index + ind + ans
												.left
											let idname2 = "#" + "right" + index + ind + ans
												.right
											let data = {
												leftid: ans.left + 'left',
												leftitem: ite.left[ans.left],
												leftmsg: {
													x: 0,
													y: 0
												},
												rightid: ans.right + 'right',
												rightitem: ite.right[ans.right],
												rightmsg: {
													x: 0,
													y: 0
												}
											}
											// console.log(idname1,"左边id");
											// const query = uni.createSelectorQuery().in(this);
											uni.createSelectorQuery().select(idname2)
												.boundingClientRect(res2 => {
													data.rightmsg.x = res2.right - (
															index * _this
															.equipmentwidth) -
														res2.width
													data.rightmsg.y = res2.top + (res2
														.height / 2)
												}).exec();
											uni.createSelectorQuery().select(idname1)
												.boundingClientRect(res1 => {
													data.leftmsg.x = res1.left - (
														index * _this
														.equipmentwidth)
													data.leftmsg.y = res1.top + (res1
														.height / 2)
												}).exec();
											ite.lxarr.push(data)
										})
										// console.log(ite.lxarr,"数据信息维护");
										this.lxFnsmallshow(index, ind)
									}
								})
							}
							let idname3 = "#swiper" + item.id
							// console.log(idname3,"高度高度");
							uni.createSelectorQuery().select(idname3)
								.boundingClientRect(res2 => {
									this.$set(item, "swiperHeight", res2.height * 2)
									// console.log(res2,"高度高度");
								}).exec();
						})
					})
				}
			}
		},
		methods: {
			scrollchange(e) {
				this.scrolltop = Number(e.detail.scrollTop)
			},
			playAudio(index, item) { //点击音频播放音频
				this.audio_currentIndex = index
				if (!item.is_play) {
					this.bgAudioManager.title = item.name;
					// this.bgAudioManager.playbackRate = Number(this.speedText).toFixed(1)//倍速
					this.bgAudioManager.seek(item.ybf_time)
					this.bgAudioManager.singer = '志辉';
					this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
					this.bgAudioManager.src = item.audio_text
					this.timu_list[this.audio_currentIndex].is_play = true
					this.watchMusic()
				} else {
					this.timu_list[this.audio_currentIndex].is_play = false
					this.bgAudioManager.pause()
				}
			},
			sliderToPlay(t, index) {
				this.timu_list[index].ybf_time = t.detail.value
				this.bgAudioManager.seek(this.timu_list[index].ybf_time)
			},
			watchMusic() {
				let _this = this
				this.bgAudioManager.onTimeUpdate(() => {
					this.timu_list[this.audio_currentIndex].ybf_time = _this.bgAudioManager.currentTime
					// console.log(_this.bgAudioManager, "更新了");
				})
				this.bgAudioManager.onEnded(() => {
					console.log("音频播放结束");
					this.timu_list[this.audio_currentIndex].is_play = false
				})
			},
			dtkswiper(index) { //轮播图切换
				this.swipercurrent = index
				this.dtlshow = false
			},
			upswiper() { //上一题
				this.swipercurrent = this.swipercurrent - 1
			},
			downswiper() { //下一题
				if (this.swipercurrent == this.timu_list.length - 1) {
					httpRequest.toast("已经是最后一题了！")
					return false
				}
				this.swipercurrent = this.swipercurrent + 1
			},
			changeswiper(e) {
				this.timu_list[this.audio_currentIndex].is_play = false
				if (this.bgAudioManager) {
					this.bgAudioManager.stop()
				}
				if (e.detail.source == "touch" && e.detail.current > this.swiperupcurrent) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current - 1
				}
				if (e.detail.source == "touch" && e.detail.current < this.swiperupcurrent + 1) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current
				}
			},
			init() {
				let _this = this
				httpRequest.request('/api/examination/problemdata', 'GET', {
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}, false, false, true).then(res => {
					//0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题 
					let arr = this.student_examination_id ? res.data : res.data.data
					arr.forEach((item, index) => {
						if (item.type == 6) {
							let jdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "jdtvalue", jdtvalue)
						} else if (item.type == 1) { //单选题
							let dxtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "dxtvalue", dxtvalue)
						} else if (item.type == 2) { //多选题
							let cwda = item.answer ? item.answer.answer_content.split(" ") : [];
							let zqda = item.answer_content.split(" ")
							item.content_json.forEach(ite => {
								this.$set(ite, "daan", 0)
								cwda.forEach(cw => {
									if (ite.key == cw) {
										ite.daan = 2
									}
								})
								zqda.forEach(zq => {
									if (ite.key == zq) {
										ite.daan = 1
									}
								})
							})
						} else if (item.type == 3) { //判断题
							let pdtvalue = item.answer ? item.answer.answer_content : ""
							this.$set(item, "pdtvalue", pdtvalue)
						} else if (item.type == 4) { //连线题
							let left = []
							let right = []
							item.content_json.forEach((ite, ind) => {
								left.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.left_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
								right.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.right_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
							})
							this.$set(item, "left", left);
							this.$set(item, "right", right);
							this.$set(item, "lxarr", []);

						} else if (item.type == 5) { //填空题
							let cwda = item.answer ? JSON.parse(item.answer.answer_content) : [];
							let zqda = JSON.parse(item.answer_content)
							zqda.forEach(zq => {
								this.$set(zq, "daan", 0)
								this.$set(zq, "tktvalue", "")
								cwda.forEach(cw => {
									if (zq.value == cw.value) {
										zq.daan = 1
									}
									if (zq.key == cw.key) {
										zq.tktvalue = cw.value
									}
								})
							})
							this.$set(item, "zqda", zqda)
						} else if (item.type == 0) {
							if (item.orther_type == 3) {
								// 苹果
								if (_this.platform === "ios") {
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.audio_text
									innerAudioContext.onCanplay(() => { //获取总时长
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												innerAudioContext.destroy()
												_this.$set(item, "audio_duration",
													innerAudioContext
													.duration)
											}
										}, 100);
									})
								} else {
									// 安卓
									let innerAudioContext = uni.createInnerAudioContext()
									innerAudioContext.src = item.audio_text
									innerAudioContext.play();
									innerAudioContext.pause()
									innerAudioContext.onCanplay(() => { //
										let intervalID = setInterval(() => {
											if (innerAudioContext.duration !== 0) {
												clearInterval(intervalID);
												_this.$set(item, "audio_duration",
													innerAudioContext
													.duration)
											}
											innerAudioContext.destroy()
										}, 100);
									})
								}
								this.$set(item, "ybf_time", 0)
								this.$set(item, "is_play", false)
								// console.log(item, "我是音频播放");
							}
							item.children.forEach(ite => {
								if (ite.type == 6) {
									let jdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "jdtvalue", jdtvalue)
								} else if (ite.type == 1) { //单选题
									let dxtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "dxtvalue", dxtvalue)
								} else if (ite.type == 2) { //多选题
									let cwda = ite.answer ? ite.answer.answer_content.split(" ") :
										[];
									let zqda = ite.answer_content.split(" ")
									ite.content_json.forEach(it => {
										this.$set(it, "daan", 0)
										cwda.forEach(cw => {
											if (it.key == cw) {
												it.daan = 2
											}
										})
										zqda.forEach(zq => {
											if (it.key == zq) {
												it.daan = 1
											}
										})
									})
								} else if (ite.type == 3) { //判断题
									let pdtvalue = ite.answer ? ite.answer.answer_content : ""
									this.$set(ite, "pdtvalue", pdtvalue)
								} else if (ite.type == 4) { //连线题
									let left = []
									let right = []
									ite.content_json.forEach((it, ind) => {
										left.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.left_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
										right.push({
											id: ind, //id拿下标这样后边提交方便处理
											name: it.right_value,
											ischeck: false, //连线题的ischeck跟多选区分开这样好查找
										})
									})
									this.$set(ite, "left", left);
									this.$set(ite, "right", right);
									this.$set(ite, "lxarr", []);
								} else if (ite.type == 5) { //填空题
									let cwda = ite.answer ? JSON.parse(ite.answer
										.answer_content) : [];
									let zqda = JSON.parse(ite.answer_content)
									zqda.forEach(zq => {
										this.$set(zq, "daan", 0)
										this.$set(zq, "tktvalue", "")
										cwda.forEach(cw => {
											if (zq.value == cw.value) {
												zq.daan = 1
											}
											if (zq.key == cw.key) {
												zq.tktvalue = cw.value
											}
										})
									})
									this.$set(ite, "zqda", zqda)
								}
							})
						}
					})
					this.timu_list = arr
					if (!this.student_examination_id) {
						this.student_examination_id = res.data.student_examination_id
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			lxFn(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + current.id)
				current.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
				})
				// console.log(current.lxarr, "连线题的数据内容");
				ctx.setStrokeStyle("#3478f5"); //线条颜色
				ctx.stroke() //画线条
				ctx.draw() //绘制画布内容
			},
			lxFnshow(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + this.timu_list[current].id)
				let lxarr = this.timu_list[current].lxarr
				setTimeout(() => { //这里加个定时器的原因是因为上边获取元素xy是异步请求，到这里的时候值拿不到所以加个定时器方便获取到值
					lxarr.forEach((item, index) => {
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					})
					ctx.setStrokeStyle("#3478f5"); //线条颜色
					ctx.stroke() //画线条
					ctx.draw() //绘制画布内容
				}, 100)
			},
			lxFnsmallshow(current, ind) {
				const ctx = uni.createCanvasContext('drawCanvas' + this.timu_list[current].children[ind].id)
				let lxarr = this.timu_list[current].children[ind].lxarr
				console.log(lxarr, 9999);
				setTimeout(() => { //这里加个定时器的原因是因为上边获取元素xy是异步请求，到这里的时候值拿不到所以加个定时器方便获取到值
					lxarr.forEach((item, index) => {
						// console.log(item.leftmsg,1111);
						// console.log(item.leftmsg.x,2222);
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					})
					ctx.setStrokeStyle("#3478f5"); //线条颜色
					ctx.stroke() //画线条
					ctx.draw() //绘制画布内容
				}, 500)
			},
			percentage(index, val) { //进度条进度
				return (index + 1) / this.timu_list.length * 100
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		},
		filters: {
			// 秒转换分钟00:00:00格式
			timeToMinute(times) {
				let t;
				if (times > -1) {
					let min = Math.floor(times / 60) % 60;
					let sec = times % 60;
					if (min < 10) {
						t = '0' + min + ":";
					} else {
						t = min + ":";
					}
					if (sec < 10) {
						t += "0";
					}
					t += sec.toFixed(2);
				}
				if (t) {
					t = t.substr(0, 5);
				}
				return t;
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.itemkabox {
		width: 16.66%;
	}

	.itemka {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(153, 153, 153, .3);
		line-height: 80rpx;
		text-align: center;
	}

	.itemkas {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #3478f5;
		line-height: 80rpx;
		text-align: center;
	}

	.jianda {
		border: 1rpx solid rgba(153, 153, 153, .3);
	}

	.titype {
		background-color: #e6edf8;
		border-radius: 50rpx;
		padding: 10rpx 40rpx;
	}

	.tilable {
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 14rpx;
		position: relative;
		background-color: #fff;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	/deep/.u-count-down__text {
		color: #3478f5;
		font-size: 20rpx;
	}

	.hongcontent {
		border: 1rpx solid #ff0000;
		background-color: #ffebeb;
	}

	.lancontent {
		border: 1rpx solid #3478f5;
		background-color: #e6edf9;
	}

	.tingliclass {
		padding: 10rpx 30rpx;
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 50rpx;
		box-sizing: border-box;
	}
</style>